<template>
  <div class="component-wrapper">
    <van-nav-bar left-arrow @click-left="$router.push('/')" />
    <div class="box1">
      <div class="d1">个人训练</div>
      <div class="d2">
        <div class="d21" v-for="(item, index) in arr1" :key="index" @click="pushFn(item)">
          <div class="d211">
            <div :style="{ backgroundColor: item.color }">
              <img :src="item.img" />
            </div>
          </div>
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="d1">团队训练</div>
      <div class="d2">
        <div class="d21" v-for="(item, index) in arr2" :key="index" @click="pushFn(item)">
          <div class="d211">
            <div :style="{ backgroundColor: item.color }">
              <img :src="item.img" />
            </div>
          </div>
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="d2">
        <div class="d21" v-for="(item, index) in arr3" :key="index" @click="pushFn(item)">
          <div class="d211">
            <div :style="{ backgroundColor: item.color }">
              <img :src="item.img" />
            </div>
          </div>
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import router from '@/router'
export default {
  data() {
    return {
      arr1: [
        {
          text: '跑步',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2243.svg',
          color: '#9586fb',
          router: '',
        },
        {
          text: '游泳',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2243.svg',
          color: '#5dd8d0',
          router: '',
        },
        {
          text: '骑行',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2236.svg',
          color: '#ecb0cd',
          router: '',
        },
        {
          text: '添加',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/shape_u2256.svg',
          color: '#dcdfe3',
          router: '',
        },
      ],
      arr2: [
        {
          text: '饮食',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2301.svg',
          color: '#fbab4d',
          router: '/diet',
        },
        {
          text: '医生',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2301.svg',
          color: '#c786fb',
          router: '/Doctor',
        },
        {
          text: '新闻',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/fill_231_u2278.svg',
          color: '#2d3396',
          router: '/news',
        },
        {
          text: '挑战',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2290.svg',
          color: '#ff9b91',
          router: '',
        },
      ],
      arr3: [
        {
          text: '喝水',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2284.svg',
          color: '#ff9b91',
          router: '/Drinkwater',
        },
        {
          text: '睡觉',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2305.svg',
          color: '#ecb0cd',
        },
        {
          text: '体重',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/vector_u2264.svg',
          color: '#a3def0',
          router: '',
        },
        {
          text: '更多',
          img: 'https://cdn7.axureshop.com/demo2023/2252028/images/39-%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95/shape_u2273.svg',
          color: '#dcdfe3',
          router: '',
        },
      ],
    }
  },
  methods: {
    pushFn(item) {
      router.push(item.router)
    },
  },
}
</script>

<style scoped lang="css">
.component-wrapper {
  position: relative; /* 确保伪元素相对于这个容器定位 */
  min-height: 100vh; /* 至少占据整个视口高度 */
}

.component-wrapper::before {
  content: ''; /* 伪元素需要内容属性 */
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%; /* 宽度占满整个容器 */
  height: 100%; /* 高度占满整个容器 */
  background-color: #34363d; /* 你想要的背景颜色 */
  z-index: -1; /* 确保伪元素在内容之下 */
}
.van-nav-bar {
  --van-nav-bar-icon-color: white;
  --van-nav-bar-text-color: black;
  background-color: #34363d;
}
.box1,
.box2,
.box3 {
  background-color: rgba(82, 84, 90);
  width: 90%;
  height: 158px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 20px; /* 增加上边距 */
}
.box1 {
  margin-top: 20%;
}
.box2 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.box3 {
  height: 108px;
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.d1 {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 12px; /* 调整字体大小 */
  height: 56px;
  line-height: 50px;
}
.d2 {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
.d2 > .d21 {
  text-align: center;
}
.d2 > .d21 > .d211 {
  background-color: white;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}
.d2 > .d21 > p {
  color: white;
  font-size: 12px;
}
.d2 > .d21 > .d211 > div {
  width: 35px;
  height: 35px;
  /* background-color: #9586fb; */
  border-radius: 50%;
  line-height: 35px;
}
</style>
